<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dom</title>
</head>

<body>
  <!-- div.box>div#d1.c1>h1{我是h1}+span#pn{我是span}+a{我是a} -->

  <div id="box" class="box">
    <div class="box">
      <div class="c3">c3</div>
      <div id="d1" class="c1">
        <h1>我是h1</h1>
        <span id="pn">我司span</span>
        <a href="#">我是a</a>
      </div>
      <div class="c2">我是c2</div>
    </div>
  </div>

  <script>
    //  后代选择器
    let ele = document.querySelector(".box .c1")
    console.log(ele);

    let ele = document.querySelector(".box").querySelector(".c1")
    console.log(ele);

    let c1 = document.querySelector(".c1")
    // 只能是最近的
    let box = c1.parentElement
    // 获取爷爷辈的
    let box = c1.parentElement.parentElement
    console.log(box);
    let boxf = c1.closest("#box")
    console.log(boxf);
    // c1 下边的同级的兄弟元素,只有1个 Sibling 吸波灵
    let c2 = c1.nextElementSibling
    console.log(c2);
    // 上边的兄弟
    let c3 = c1.previousElementSibling
    console.log(c3);
    // 获取到所有的孩子,是一个数组
    let son = c1.children
    console.log(son);
    // 第一个子节点
    let h1 = c1.firstElementChild
    // 最后一个子节点
    let a = c1.lastElementChild
  </script>
</body>

</html>